/**
 * Created by Yun on 2015-12-15.
 */
import React, { PropTypes } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
} from 'react-native';

import styles from './TabBar.style';

export default class TabBar extends React.Component {
  static propTypes = {
    style: View.propTypes.style,
    children: PropTypes.arrayOf(PropTypes.element),

  };

  renderContent() {
    let selected = this.props.children.filter(v => v.props.selected)[0];
    selected = selected && selected.props.children;
    return selected || null;
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderContent()}
        <View style={[styles.tabbarView, this.props.style]}>
          {this.props.children}
        </View>
      </View>
    );
  }
}

const ItemPropTypes = {
  ...TouchableOpacity.propTypes,
  selected: PropTypes.bool,
  title: PropTypes.string,
  icon: Image.propTypes.source,
  selectedIcon: Image.propTypes.source,
};

function TabBarItem(props) {
  const {
    selected,
    icon,
    selectedIcon,
    title,
    ...others,
  } = props;
  return (
    <TouchableOpacity {...others} style={styles.iconView}>
      <View style={styles.iconView}>
        <Image source={selected ? selectedIcon : icon} style={styles.icon} resizeMode="contain" />
        <Text style={[styles.tabText, selected && styles.activedTabText]}>{title}</Text>
      </View>
    </TouchableOpacity>
  );
}

TabBarItem.propTypes = ItemPropTypes;
TabBar.Item = TabBarItem;
